<template>
  <div class="app-container">
    <el-card shadow="never" class="header">
      <el-form ref="form" :inline="true" :model="infoForm" class="demo-form-inline">
        <el-row :gutter="60">
          <el-col :span="8">
            <el-form-item label="快递员账号:" prop="account">
              <el-input v-model.trim="infoForm.account" placeholder="请输入快递员账号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递员姓名:" prop="name">
              <el-input v-model.trim="infoForm.name" clearable placeholder="请输入快递员姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递员手机号:" prop="phone">
              <el-input v-model.trim="infoForm.phone" clearable placeholder="请输入快递员手机" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row_2" :gutter="60">
          <el-col :span="8">
            <el-form-item label="所属机构:" prop="agentId">
              <tree-select :id.sync="infoForm.agentId" v-model="selected.value" class="tree-select" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button @click="fnReset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" class="body">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%; min-width: 1209px"
      >
        <el-table-column label="序号" width="100">
          <template #default="slot">
            {{ (infoForm.page - 1) * infoForm.pageSize + slot.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="account" label="快递员账号" width="200" />
        <el-table-column prop="name" label="快递员姓名" width="300" />
        <el-table-column prop="mobile" label="快递员手机号" width="250" />
        <el-table-column prop="agency.name" label="所属机构" width="300" />
        <el-table-column prop="workStatus" label="工作状态" width="230">
          <template #default="{ row }">
            <span v-if="row.workStatus" class="work workStatus">上班</span>
            <span v-else class="rest workStatus">休息</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="{ row }">
            <!-- {{ row.id }} -->
            <router-link
              :to="{
                path:'/user/map-content',
                query:{
                  id:row.userId
                }
              }"
            >作业范围分配</router-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="infoForm.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="infoForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <Footer />
  </div>
</template>

<script>
import { getCourierAPI } from '@/api/employee'
export default {
  name: 'CourierManage',
  data() {
    return {
      tableData: [],
      selected: {
        value: ''
      },
      infoForm: {
        page: 1,
        pageSize: 10,
        account: '',
        name: '',
        phone: '',
        agentId: ''
      },
      counts: 0,
      loading: false
    }
  },
  created() {
    this.getCourier()
  },
  methods: {
    async getCourier() {
      this.loading = true
      const res = await getCourierAPI(this.infoForm)
      this.counts = res.counts * 1
      this.tableData = res.items
      this.loading = false
    },
    onSearch() {
      this.infoForm.page = 1
      this.getCourier()
    },
    handleSizeChange(val) {
      this.infoForm.pageSize = val
      this.getCourier()
    },
    handleCurrentChange(val) {
      this.infoForm.page = val
      this.getCourier()
    },
    // 重置
    fnReset() {
      this.$refs.form.resetFields()
      this.selected.value = ''
      this.getCourier()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  .header {
    :deep(.el-card__body) {
      padding: 0;
      .el-form {
        background-color: #fff;
        min-width: 1269px;
        padding: 20px 30px;
        .el-form-item {
          display: flex;
          width: 100%;
          justify-content: flex-end;
          .tree-select{
            width: 100%;
          }
          .el-form-item__label {
            font-weight: normal;
          }
          .el-form-item__label {
            min-width: 95px;
          }
          .el-form-item__content {
            flex: 1;
            .el-input {
              width: 100%;
            }
          }
        }
      }
      .el-button {
        width: 90px;
      }

      .row_2 {
        .el-form-item {
          margin-bottom: 0;
        }
      }
    }
  }
  .body {
    margin-top: 20px;
    // padding: 20px;
    :deep(.el-card__body) {
      padding: 30px !important;
    }
    :deep(.el-table) {
      border: 1px solid #ebeef5;
      a {
        color: #419eff;
        font-size: 13px;
      }
      .el-table__header th {
        background-color: #f8faff;
        &:nth-child(1){
          .cell{
            padding-left: 20px;
          }
        }
      }
      .el-table__row td {
        &:nth-child(1){
          .cell{
            padding-left: 20px;
          }
        }
      }
      .el-table__body-wrapper {
        &::-webkit-scrollbar {
          background-color: transparent;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          border: 4px solid #fff;
          background-color: #dddee0;
        }
      }
      .workStatus {
        font-size: 13px;
        &::before {
          content: "";
          display: inline-block;
          margin-right: 6px;
          width: 6px;
          height: 6px;
          border-radius: 50%;
        }
      }
      .work::before {
        background-color: #1dc779;
      }
      .rest::before {
        background-color: #e15536;
      }
    }
  }
  .el-pagination {
    margin: 22px auto;
    text-align: center;
    span {
      font-size: 14px !important;
      color: #20232a !important;
    }
  }
}
</style>
